.App {
  position: relative;
  .active_tips {
    position: absolute;
    width: 100%;
    bottom: 20px;
    text-align: center;
    color: #fff;
    font-weight: 600;
  }
}
.coin_lottery_wrap2 {
  min-height: 100vh;
  // background: linear-gradient(180deg, #15182F -1.28%, #101A29 100%);
  background: #4a0d0d url('../../../images/coin_lottery2/love_bg.png') no-repeat;
  background-size: contain;
  box-sizing: border-box;
  padding-top: 280px;
  // border-radius: 30px 30px 0 0;
  padding-bottom: 75px;
  overflow: hidden;
  // position: relative;
  .zhuangban_wrap {
    padding-top: 32px;
    box-sizing: border-box;
    // margin: 0 94px;
    // margin: 0 18px;
    padding: 35px 16px;
    position: relative;
    background: #702827;
    border: 6px solid #ffe6d8;
    .sale_items {
      display: flex;
      justify-content: space-around;
    }
    .close_btn {
      position: absolute;
      right: 0px;
      top: 18px;
      width: 30px;
      height: 30px;
      background: url('../../../images/coin_lottery/close_btn.png') no-repeat;
      background-size: contain;
    }
    .title {
      // margin: -20px auto 0;
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 58px;
      background: url('../../../images/coin_lottery2/title1.png') no-repeat;
      background-size: contain;
    }
    .sale_box {
      // margin: 0 76px;
      width: 124px;
      margin-top: 30px;
      .sale_item {
        margin: 0 auto;
        width: 104px;
        height: 104px;
        background: url('../../../images/coin_lottery2/sale_item_bg.png') no-repeat;
        background-size: contain;
        display: flex;
        position: relative;

        .type_txt {
          left: -12px;
          position: absolute;
          font-size: 12px;
          color: #fff;
        }
        .img {
          margin: 0 auto;
          width: 100px;
          height: 100px;
          // background-color: gainsboro;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .point {
          min-width: 68px;
          text-align: center;
          position: absolute;
          padding: 4px 6px;
          background: #ff6868;
          // border-radius: 15px;
          color: #fff;
          right: 24px;
          bottom: -4px;
          left: 50%;
          transform: translateX(-50%) scale(0.86);
          // transform: scale(.86);
        }
      }
      .sale_action {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        .act {
          width: 27px;
          height: 27px;
          // line-height: 20px;
          // border-radius: 50%;
          // color: #324B2D;
          // font-weight: 600;
          // font-size: 18px;
          &.down {
            background: url('../../../images/coin_lottery2/down.png') no-repeat;
            background-size: contain;
          }
          &.add {
            background: url('../../../images/coin_lottery2/add.png') no-repeat;
            background-size: contain;
          }
        }
        .nums {
          margin: 8px;
          width: 55px;
          height: 24px;
          border-radius: 20px;
          background: rgba(255, 255, 255, 0.2);
          input {
            color: #fff;
            text-align: center;
            font-size: 12px;
          }
        }
      }
      .sale_info {
        margin-top: 4px;
        text-align: center;
        font-size: 12px;
        color: #fff;
        font-weight: 500;
        line-height: 17px;
        span {
          color: #ffe6d8;
          &:last-of-type {
            color: #fff;
            opacity: 0.6;
          }
        }
        .name {
          color: #fff;
          opacity: 0.6;
        }
      }
      p {
        text-align: center;
        color: #fff;
        opacity: 0.6;
        margin-bottom: 6px;
      }
      .sale_data {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        color: #affba1;
        .item {
          width: 81px;
          height: 64px;
          text-align: center;
          opacity: 0.6;
          box-sizing: border-box;
          background: rgba(175, 251, 161, 0.1);
          border: 2px solid transparent;
          border-radius: 16px;
          .type {
            box-sizing: border-box;
            line-height: 22px;
            padding-top: 11px;
            font-size: 16px;
          }
          .price {
            font-size: 14px;
            line-height: 20px;
          }
          &.active {
            border: 2px solid #affba1;
            opacity: 1;
          }
        }
      }
      .buy_btn {
        width: 122px;
        height: 41px;
        background: url('../../../images/coin_lottery2/btn1_bg.png') no-repeat center;
        background-size: contain;
        margin: 0 auto;
        color: #702827;
        font-size: 14px;
        text-align: center;
        line-height: 36px;
        font-weight: 600;
        &:active {
          transform: scale(0.96);
          transition-duration: 200ms;
        }
      }
    }
    .sale_tips {
      margin-top: 24px;
      font-size: 12px;
      line-height: 17px;
      // color: #fff;
      p {
        color: rgba(#fff, 0.6);
      }
      p > span {
        color: #fff;
      }
    }
  }

  .wabao {
    box-sizing: border-box;
    // margin: 24px 18px 0;
    margin-top: 32px;
    position: relative;
    padding: 24px 18px;
    background: #702827;
    border: 6px solid #ffe6d8;
    box-sizing: border-box;
    .title {
      margin: 0 auto 22px;
      width: 152px;
      height: 57px;
      background: url('../../../images/coin_lottery2/title2.png') no-repeat;
      background-size: contain;
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%);
    }
    .menu_list {
      margin-top: 21px;
      display: flex;
      // flex-wrap: wrap;
      // justify-content: space-between;
      .item {
        // background-color: #324B2D;
        width: 100px;
        height: 52px;
        &.active {
          width: 106px;
          height: 57px;
        }
        margin-right: 18px;
        // opacity: .6;
        transition-duration: 400s;
        &.active {
          opacity: 1;
        }
        &:nth-of-type(n + 3) {
          margin-right: 0;
        }
      }
      img {
        width: 100%;
      }
    }
    .gonggao_tips {
      margin: 16px 0 12px 0;
      display: flex;
      align-items: center;
      .gonggao {
        margin: 0 auto;
        width: 230px;
        height: 23px;
        background: url('../../../images/coin_lottery2/gonggao.png') no-repeat;
        background-size: contain;
        overflow: hidden;
        .con {
          transform: translate3d(0);
          animation: 30s wordsLoop linear infinite;
        }
        .txt {
          height: 23px;
          line-height: 23px;
          color: #fff;
          font-size: 12px;
          transform: scale(0.86);
          .name,
          .award {
            color: #affba1;
          }
          .box {
            color: #f9dc3f;
          }
        }
      }
      .record_btn {
        margin-left: -24px;
        font-weight: 500;
        padding-left: 12px;
        color: #f9dc3f;
        width: 75px;
        height: 34px;
        line-height: 34px;
        background: url('../../../images/coin_lottery2/rule_btn_bg.png') no-repeat;
        background-size: contain;
      }
      .rule_btn {
        margin-right: -32px;
        font-weight: 500;
        padding-left: 12px;
        color: #ffe6d8;
        width: 75px;
        height: 34px;
        line-height: 34px;
        background: url('../../../images/coin_lottery2/record_btn_bg.png') no-repeat;
        background-size: contain;
      }
    }
    .user_data {
      // position: absolute;
      // left: 0;
      // width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(#ffe6d8, 0.8);
      // justify-content: space-between;
      position: relative;
      width: 100%;
      font-size: 14px;
      span {
        color: rgba(#ffe6d8, 1);
        font-weight: 600;
      }

      .btn {
        box-sizing: border-box;
        width: 145px;
        height: 41px;
        color: #ffe6d8;
        font-weight: 600;
        font-size: 14px;
        line-height: 44px;
        background: url('../../../images/coin_lottery2/right2.png') no-repeat;
        background-size: contain;
        // position: absolute;
        // transform: matrix(-1, 0, 0, 1, 0, 0);
      }
      .get_coin {
        width: 167px;
        height: 41px;
        background: url('../../../images/coin_lottery2/left2.png') no-repeat;
        background-size: contain;
        margin-left: -24px;
        padding-left: 16px;
        a {
          color: #ffe6d8;
          text-decoration: none;
        }
      }
      .coin_num {
        padding-left: 16px;
        margin-right: -54px;
      }
    }

    .gift_data {
      margin: 0px 0 18px 0;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;

      min-height: calc(108px * 2);
      .around_item {
        margin-right: 4px;
        font-size: 0;
        box-sizing: border-box;
        width: 106px;
        height: 106px;
        background: url('../../../images/coin_lottery2/gift_item.png') no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 40px;
          height: 40px;
          font-size: 0;
          border-radius: 50%;
          overflow: hidden;
        }
        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
      .center_item {
        width: 108px;
        height: 108px;
        background: url('../../../images/coin_lottery2/gift_item.png') no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100px;
          height: 100px;
          text-align: center;
          font-size: 0;
        }
      }
    }

    .get_gift_wrap {
      display: flex;
      justify-content: space-between;
      // margin: 70px 8px 0 8px;
      margin-top: 18px;
      .wabao_btn {
        color: #702827;
        margin-right: 4px;
        width: 137px;
        height: 56px;
        line-height: 54px;
        text-align: center;
        box-sizing: border-box;
        background: url('../../../images/coin_lottery2/wabao_btn.png') no-repeat;
        background-size: contain;
      }
      .num_btn {
        margin-left: 6px;
        color: #702827;
        width: 56px;
        line-height: 52px;
        text-align: center;
        height: 52px;
        background: #ffe6d8;
        opacity: 0.2;
        // background: url('../../images/coin_lottery/un_num_btn.png') no-repeat;
        // background-size: contain;
        &.active {
          height: 56px;
          opacity: 1;
          background: url('../../../images/coin_lottery2/num_btn.png') no-repeat;
          background-size: contain;
        }
      }
      span {
        font-weight: 600;
        font-size: 18px;
        color: #68521b;
      }
    }
  }

  .adm-modal-body {
    background: transparent;
    // width: 296px;
    .adm-modal-content {
      overflow: hidden;
    }
  }
  .mo_contetn {
    background: #702827;
    border: 4px solid #ffe6d8;
    // border-radius: 40px;
    height: 60vh;
    box-sizing: border-box;
    position: relative;
    letter-spacing: 1px;
    .scorll {
      // border: 2px dashed #FFE6D8;
      padding: 16px 12px;
      box-sizing: border-box;
      height: 55vh;
      overflow-y: scroll;
    }
    .rule {
      > div {
        // margin: 2px;
        padding: 0.1px;
      }
      p {
        font-size: 14px;
        color: #fff;
        font-weight: 500;
        line-height: 20px;
      }
      .rule_tit {
        // margin: 0 0 2px 0;
        padding-bottom: 6px;
        text-align: center;
        color: #ffe6d8;
        font-weight: 500;
        font-size: 18px;
        line-height: 25px;
      }
      img {
        width: 100%;
      }
    }
    &::before {
      content: '';
      position: absolute;
      width: 97%;
      height: 97%;
      border: 2px dashed #ffe6d8;
      opacity: 0.4;
      // background-color: blueviolet;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
  }

  .adm-center-popup-wrap {
    width: 350px;
    max-width: 350px;
  }
  .result_box {
    box-sizing: border-box;
    padding: 14px 16px;
    background: #702827;
    border: 4px solid #ffe6d8;
    position: relative;
    // border-radius: 40px;
    // width: 343px;
    // min-height: 200px;
    // max-height: 420px;
    .tit {
      text-align: center;
      font-weight: 500;
      font-size: 30px;
      line-height: 45px;
      color: #ffe6d8;
      margin-bottom: 12px;
    }
    .scorll {
      max-height: 45vh;
      overflow-y: scroll;
      display: flex;
      flex-wrap: wrap;
      // align-items: center;
      // justify-content: space-evenly;
      .data_item {
        width: 70px;
        // margin-right: 12px;
        margin-bottom: 12px;
        text-align: center;
        img {
          width: 60px;
          height: 60px;
          font-size: 0;
        }
        .info {
          color: #fff;
          display: flex;
          align-items: center;
          font-size: 12px;
          // zoom: .86;
          transform: scale(0.86);
          margin-bottom: -6px;
        }
        .name {
          font-weight: 500;
          // line-height: 14px;
        }
        // &:nth-of-type(3n) {
        //     margin-right: 0;
        // }
      }
    }
    &::before {
      content: '';
      position: absolute;
      width: 97%;
      height: 97%;
      border: 2px dashed #ffe6d8;
      opacity: 0.4;
      // background-color: blueviolet;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
  }

  .record {
    background: #702827;
    border: 4px solid #ffe6d8;
    // border-radius: 40px;
    // height: 380px;
    padding: 24px 24px 18px 24px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: 97%;
      height: 97%;
      border: 2px dashed #ffe6d8;
      opacity: 0.4;
      // background-color: blueviolet;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }
    .tit {
      text-align: center;
      font-weight: 500;
      font-size: 18px;
      line-height: 25px;
      color: #ffe6d8;
      margin: 16px 0 10px 0;
    }
    .list {
      height: 48vh;
      box-sizing: border-box;
      overflow-y: scroll;
      .item_data {
        margin-bottom: 12px;
      }
      .item {
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        .info {
          .name {
            font-size: 14px;
            line-height: 20px;
          }
        }
        .time,
        .note {
          color: #fff;
          opacity: 0.6;
          font-size: 12px;
          transform: scale(0.86);
          margin-left: -4px;
        }
        .note {
          text-align: right;
          width: 90px;
        }
      }
      .more_note {
        margin-top: 4px;
        color: #fff;
        opacity: 0.6;
        line-height: 20px;
        padding: 12px;
        font-size: 12px;
        box-sizing: border-box;
        background: rgba(#ffe6d8, 0.2);
        border-radius: 20px 0 20px 20px;
      }
    }
  }
}
.App {
  padding-top: 0;
}
::-webkit-scrollbar {
  width: 0;
}

@keyframes wordsLoop {
  0% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateY(-100%);
  }
}
